<template>
  <div v-html="compiledMarkdown"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { marked } from 'marked';
import axios from 'axios';

// Markdown 内容
const markdownContent = ref(`
## 1.Spring Boot基础注解
- \`@SpringBootApplication\): 项目启动类
- \`@RestController\): 请求处理类
- \`@RequestMapping\): 标识请求路径
- \`@SpringBootTest\): Spring Boot单元测试类注解

## 2.Spring Boot获取请求参数
1. 原始方式（\`HttpServletRequest\`）
\`\`\`java
@RestController
public class IndexController {
    @RequestMapping("/simpleParams")
    public String simpleParam(HttpServletRequest request){
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        return name + ":" + age;
    }
}
\`\`\`
2. 简单参数
\`\`\`java
@RequestMapping("/simpleParam")
public String simpleParams(@RequestParam("username") String name){
    return name;
}
\`\`\`
3. 简单实体参数
\`\`\`java
@RequestMapping("/simpleEntity")
public String simplePojo(User user){
    return user.toString();
}
\`\`\`
4. 数组集合参数
\`\`\`java
@RequestMapping("/arrayParams")
public String arrayParams(String[] hobbies){
    return Arrays.toString(hobbies);
}

@RequestMapping("/list")
public List<String> list(@RequestParam List<String> names){
    return names;
}
\`\`\`
5. 时间日期参数
\`\`\`java
@RequestMapping("/dateParam")
public String dateParam(@DateTimeFormat(pattern="yyyy-MM-dd HH:mm:ss") LocalDateTime date){
    String[] arrays = date.toString().split("T");
    String result = arrays[0];
    for(int i = 1; i < arrays.length; i++){
        result += " " + arrays[i];
    }
    return result;
}
\`\`\`
6. JSON参数
\`\`\`java
@RequestMapping("/list")
public UserList list(@RequestBody UserList list){
    return list;
}
\`\`\`
7. URL路径参数
\`\`\`java
@RequestMapping("/path/{id}/{name}")
public String pathParams(@PathVariable Integer id){
    System.out.println(id);
    return "Ok";
}
\`\`\`
`);

onMounted(() => {
    axios.post('/hello').then((result)=>{
        console.log(result,'result');
    })
})

// 编译Markdown为HTML
const compiledMarkdown = ref(marked(markdownContent.value));
</script>